<template>
  <div class="download_box" ref="downloadBox">
    <header>
      <div class="d_logo"><img src="@/assets/img/down_logo.png" alt=""></div>
      <h3>“找达人 选商品” 用掌上精选</h3>
      <h4>直播电商数字化决策平台</h4>
    </header>
    <ul>
      <li>
        <div class="img_box"><img src="@/assets/img/d_icon_live.png" alt=""></div>
        <p>直播</p>
      </li>
      <li>
        <div class="img_box"><img src="@/assets/img/d_icon_goods.png" alt=""></div>
        <p>爆款商品</p>
      </li>
      <li>
        <div class="img_box"><img src="@/assets/img/d_icon_as.png" alt=""></div>
        <p>智能分析</p>
      </li>
      <li>
        <div class="img_box"><img src="@/assets/img/d_icon_talent.png" alt=""></div>
        <p>达人资源库</p>
      </li>
      <li>
        <div class="img_box"><img src="@/assets/img/d_icon_rank.png" alt=""></div>
        <p>排行榜</p>
      </li>
      <li>
        <div class="img_box"><img src="@/assets/img/d_icon_jc.png" alt=""></div>
        <p>账号检测</p>
      </li>
    </ul>
    <footer>
      <div class="d_btn" @click="btnFn"><i :class="$OSType"></i><strong>点击下载</strong></div>
    </footer>
    <div class="ios_box_tip" v-if="$isWX && $OSType == 'ios'">
      <img src="@/assets/img/share_arrows.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
      return {
        schemeUrl:'zsjxscheme://host:8080/path',  //自定义协议
        yybUrl:'https://a.app.qq.com/o/simple.jsp?pkgname=com.zshd.douyin_android',
        appStore:'https://apps.apple.com/cn/app/id1594119689'
      };
    },
    watch: {},
    computed: {},
    created() {
    },
    mounted() {
      this.initPage();
    },
    methods: {
      btnFn(){
        if(this.$isWX){ //如果是在微信，则跳应用宝
          location.href = this.yybUrl;
        }else{  //如果在外部浏览器打开则先唤起客户端，如没有唤起成功则安卓跳应用宝，ios跳苹果商店
          // location.href = this.schemeUrl;
          // setTimeout(()=>{
          //   let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden;
          //   if(typeof hidden == "undefined" || !hidden){  //判断页面是否关闭
          //     if(this.$OSType == 'ios'){
          //       window.location.href = this.appStore;
          //     }else{
          //       window.location.href = this.yybUrl;
          //     }
          //   }
          // },2000);
          if(this.$OSType == 'ios'){
            window.location.href = this.appStore;
          }else{
            window.location.href = this.yybUrl;
          }
        }
      },
      initPage(){ //适配
        let boxEl = this.$refs.downloadBox,winH = document.body.clientHeight
        if(winH < 667){
          boxEl.style.paddingBottom = 667 - winH+'px';
        }
      }
    },
};
</script>

<style scoped lang="stylus">
@import '~@/common/common.styl';
.ios_box_tip{
  position: fixed
  width: 100%
  height: 100%
  left: 0
  top: 0
  background-color: rgba(0,0,0,.7)
  img{
    position: absolute
    width: rem(430)
    height: rem(191)
    top: 0
    right: rem(20)

  }
}
.download_box{
  min-height: 100vh
  max-width: rem(750)
  margin: 0 auto
  bgp('~@/assets/img/down_bg.jpg')
  background-size: 100%  auto
  background-position: top center
  background-color: #ed7419
  color: #fff
}
header{
  display: flex
  flex-direction: column
  align-items: center
  padding-top: rem(110)
  .d_logo{
    width: rem(200)
    height: rem(200)
    img{
      width: 100%
    }
  }
  h3{
    font-size rem(38)
    font-weight: normal
  }
  h4{
    margin-top: rem(20)
    font-size rem(28)
    line-height: rem(53)
    padding: 0 rem(30)
    border 1px solid rgba(255,255,255,.2)
    background-color: rgba(255,255,255,.2)
    border-radius: rem(29)
    color: rgba(255,255,255,.88)
  }
}
ul{
  display: flex
  justify-content: space-between
  flex-wrap wrap
  width: rem(630)
  margin: rem(106) auto 0
  font-size rem(30)
  li{
    width 33.33%
    display: flex
    flex-direction: column
    align-items: center
    margin-bottom: rem(60)
    .img_box{
      width: rem(100)
      height: rem(100)
      img{
        width: 100%
      }
    }
    p{
      margin-top: rem(14)
    }
  }
}
footer{
  position: fixed
  left: 0
  bottom: 0
  width: 100%
  height: rem(338)
  bgp('~@/assets/img/down_footer_bg.png')
  .d_btn{
    width: rem(561)
    height: rem(94)
    display: flex
    justify-content: center
    align-items: center
    margin: rem(139) auto 0
    background-color: #ef792d
    border-radius: rem(47)
    i{
      display: inline-block
      width: rem(33)
      height: rem(40)
      margin-right rem(15)
      &.android{
        bgp('~@/assets/img/down_android.png')
      }
      &.ios{
        bgp('~@/assets/img/down_ios.png')
      }
    }
    strong{
      display: inline-block
      font-size: rem(36)
    }
  }
}
</style>
